import React, { Component } from 'react'
import GrandSon2 from './GrandSon2'
import GrandSon3 from './GrandSon3'
import { Consumer } from './colorContext'

class Child2 extends Component {
  renderTitle = () => {
    return <h1>my title</h1>
  }

  render() {
    return (
      <div>
        <Consumer>
          {
            value => {
              return (
                <h2 style={{color: value.color}}>child2</h2>
              )
            }
          }
        </Consumer>
        {/* render props */}
        <GrandSon2 title={this.renderTitle}>
          {
            (str) => {
              return <h2>child content {str}</h2>
            }
          }
        </GrandSon2>

        <GrandSon3></GrandSon3>
      </div>
    );
  }
}

export default Child2;